<template>
  <div>
    <chartContent title="各医院采集数据量">
      <div id="gatherContainer" style="width: 22.7vw; height: 33.19vh"></div>
    </chartContent>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, watch } from "vue";
import * as echarts from "echarts";
import chartContent from "./chartContent.vue";
const props = defineProps(["data"]);
let gatherChart = null;
watch(props.data, () => {
  let gatherContainer = document.getElementById("gatherContainer");
  gatherChart = echarts.init(gatherContainer);
  let options = {
    tooltip:{},
    color: ["#87CEFA", "#FF7F50", "#32CD32", "#DA70D6"],
    legend: {
      bottom: 35,
      itemWidth: 15,
      itemHeight: 8,
      itemGap: 6,
      textStyle: {
        color: "#D9DCE0",
        fontSize: 8
      },
    },
    series: [
      {
        type: "pie",
        bottom: 30,
        label: {
          show: false,
        },
        radius: ["40%", "70%"],
        data: props.data,
      },
    ],
  };
  gatherChart.setOption(options);
});
onMounted(() => {
  window.addEventListener("resize", () => {
    gatherChart.resize()
  });
});
onUnmounted(() => {
  window.removeEventListener('resize')
  echarts.dispose(gatherChart);
  gatherChart = null;
});
</script>

<style lang="less" scoped></style>
